<template>
  <el-dialog
    title="文件信息"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <div style="margin-left: 30px;text-align: left;margin-top: -4%;">
      <i :class="file.type === 0 ? 'el-icon-tickets':'el-icon-message'"
         style="font-size: 65px;"></i>
      <div style="float:right; margin-right: 40%; margin-top: 2%;">
      <el-input v-model="file.name" @change="isChanged=true"></el-input>
        </div>
      <hr/>
    <p>文件大小：{{file.length}}</p>
    <p>创建人：{{file.username}}</p>
    <p>文件类型：{{file.type == 0?'文件夹':'文件'}}</p>
    <p>文件路径：{{file.location}}</p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = close()">关闭</el-button>
      <el-button type="primary" @click="rename()">确定</el-button>
    </span>
    <div class="disk" v-loading="loading">
      <p>占用磁块：{{diskList.length}}<a @click="diskInfo" style="cursor:pointer; color:black; float:right;margin-right:2%;"> 详情</a></p>
      <el-row :gutter="1">
        <el-col v-for="(item,index) in diskList" :xs="3" :sm="3" :md="2" :lg="3" :xl="3">
          <el-tooltip class="item" effect="dark"  placement="top">
            <div slot="content">状态:{{index % 8==0?'空闲':'占用'}}<br/>磁块号:{{item}}</div>
            <div>
              <img  src="~@/assets/img/blue-disk.png">
              <div style="margin-top: -15px;margin-left: 5px;font-size: 15px;color: black">
                {{item}}
              </div>
            </div>
          </el-tooltip>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
    export default {
      name: "fileInfo",
      data () {
        return {
          visible: true,
          file: {},
          diskList:[],
          oldname: '',
          isChanged: false,
          menuList: [],
          loading: false,
          menuListTreeProps: {
            label: 'name',
            children: 'children'
          },
          dataForm: {
            id: 0,
            roleName: '',
            remark: ''
          },
          dataRule: {
            roleName: [
              { required: true, message: '角色名称不能为空', trigger: 'blur' }
            ]
          },
          tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
        }
      },
      methods:{
        init(file){
          this.file = file;
          this.visible = true;
          this.isChanged = false;
          this.oldname = file.name;
          let count = Math.floor(Math.random()*20);
          this.diskList = [];
          this.loading = true;
          this.$http({
            url: this.$http.adornUrl('/file/disklist'),
            method: 'get',
            params: this.$http.adornParams({
              fid: this.file.parentId,
              name: this.file.name,
            })
          }).then(({data}) => {
            if (data && data.code === 200) {
              this.diskList = data.data.diskList;
              this.loading = false;
            }
          });
        },
        rename(){
          if(this.isChanged){
            this.$http({
              url: this.$http.adornUrl('/file'),
              method: 'put',
              params: this.$http.adornParams({
                fid: this.file.parentId,
                oldname: this.oldname,
                newname: this.file.name
              })
            }).then(({data}) => {
              if (data && data.code === 200) {
                this.$message({
                  message: '重命名成功',
                  type: 'success',
                  duration: 1000
                });
                this.visible = false;
                this.isChanged = false;
              }else{
                this.$message({
                  message: data.data.message,
                  type: 'error',
                  duration: 1000
                });
              }
            });
          }else{
            console.log("not rename")
            this.visible = false;
          }
        },
        close(){
          if(this.isChanged){
            this.file.name = this.oldname;
          }
          this.visible = false;
        },
        diskInfo(){
          this.$router.push({
            name: 'diskInfo',
            params: {
              file:this.file,
              type:1,
              fileDisk:this.diskList
            }
          })
          this.close();
        }
      }
    }
</script>

<style scoped>

  .el-input{
    margin-left:50px;
    width: 300px;
  }
  .disk{
    margin-top: -18.5%;
    float:right;
    width: 50%;
  }
  img{
    /*width:40px;*/
    width:100%;
    height:auto;
  }
  .item {
    margin: 2px;
  }
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
    margin-bottom: 5px;
  }

</style>
